<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/main.css" rel="stylesheet" />
		<script src="js/mui.min.js"></script>
	</head>
	
	<body>
		<!--头部-->
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-icon mui-icon-plusempty mui-pull-right" href="#topPopover"></a>
		    <h1 class="mui-title">微信</h1>
		</header>
	
		<!--主体-->
		<div class="mui-content">
			<!--右上角弹出菜单-->
			<div id="topPopover" class="mui-popover">
		  		<ul class="mui-table-view">
				    <li class="mui-table-view-cell" id="moreChat"><span class="mui-icon mui-icon-chatbubble"></span><span class="mui-pop">发起群聊</span></li>
				    <li class="mui-table-view-cell" id="addPen"><span class="mui-icon mui-icon-personadd"></span><span class="mui-pop">添加朋友<span></li>
				    <li class="mui-table-view-cell" id="saoyisao"><span class="mui-icon mui-icon-camera"></span><span class="mui-pop">扫一扫<span></li>
				    <li class="mui-table-view-cell" id="shoufukuan"><span class="mui-icon mui-icon-checkmarkempty"></span><span class="mui-pop">收付款<span></li>
		  		</ul>
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;" title="幸福">
						<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
						<div class="mui-media-body">
							幸福
							<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;" title="木屋">
						<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
						<div class="mui-media-body">
							木屋
							<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;" title="CBD">
						<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
						<div class="mui-media-body">
							CBD
							<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>
			</ul>
			
		</div>
		
		<script type="text/javascript">
			mui.init()
			//加载事件
			mui.plusReady(function() {
				
				//打开聊天页面
				mui(".mui-table-view-cell").on("tap", "a", function() {
					var title= this.getAttribute("title");
					mui.openWindow({
						url: "sub/chat.html",
						id: "sub/chat.html",
						extras: {
							name:title //自定义扩展参数，可以用来处理页面间传值
						},
						show: {
							autoShow: true, //页面loaded事件发生后自动显示，默认为true
							aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
							duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
						},
						waiting: {
							autoShow: true, //自动显示等待框，默认为true
							title: '正在加载...' //等待对话框上显示的提示内容
							
						}
					})
				});
				//弹出菜单功能
				mui(".mui-popover").on("tap","li",function(){
					var id=this.getAttribute("id");
					if(id=="moreChat"){
							/*发起群聊*/
							//todo
							
						}else if(id=="addPen"){
							/*添加朋友*/
							//todo
							
						}else if(id=="saoyisao"){
							/*扫一扫*/
							//打开二维码页面
							mui.openWindow({
							    url:"barcode.html",
							    id:"barcode.html",
							    show:{
							      autoShow:true,//页面loaded事件发生后自动显示，默认为true
							      aniShow:"slide-in-right",//页面显示动画，默认为”slide-in-right“；
							      duration:100//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
							    },
							    waiting:{
							      autoShow:true,//自动显示等待框，默认为true
							      title:'正在加载...'//等待对话框上显示的提示内容
							    }
							})
							//startRecognize();//开始扫描
						}else{
							/*收付款*/
							//todo
							
						}
					
				});
			})
			
		</script>
	</body>

</html>